<template>
	<view>
		<!-- 头部状态栏 -->
		<view class="todo-head">
			<view class="todo-head_left">
				<text class="todo-head_left-active">共</text>
				<text class="todo-head_left-test">{{listData.length}}条</text>
			</view>
			<view class="todo-head_right">
				<text class="todo-head_right-item" :class="{active:active==1}" @click="changeList(1)">全部</text>
				<text class="todo-head_right-item" :class="{active:active==2}" @click="changeList(2)">待办</text>
				<text class="todo-head_right-item" :class="{active:active==3}" @click="changeList(3)">已完成</text>
			</view>
		</view>
		<!-- 数据列表 -->
		<view class="todo-content" v-if="listData.length">
			<view class="todo-list" v-for="item in listData" :class="{'todo-finish': item.isFinished}" @click="hasFinished(item.isFinished, item.id)" :key="item.id">
				<view class="todo-list_checkbox"><view class="checkbox"></view></view>
				<view class="todo-list_content">{{item.content}}</view>
			</view>
		</view>
		<view class="todo-noData" v-else>暂无数据</view>
		<!-- 创建按钮 -->
		<view class="todo-create"><text @click="create" class="iconfont-oa todo-create-icon icon-oa-dashujukeshihuaico-" :class="{'todo-create-active': textShow}"></text></view>
		<!-- 输入内容 -->
		<view class="todo-create-content" v-if="isInput" :class="{'create-show': textShow}">
			<view class="create-input"><input type="text" v-model="value" placeholder="请输入内容" /></view>
			<view class="create-button" @click="add">创建</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: 1, // 头部激活状态
			isInput: false, // 是否展示输入框
			textShow: false, // 动画效果
			value: '', // 输入框的值
			list: []
		};
	},
	computed: {
		listData() {
			let list = JSON.parse(JSON.stringify(this.list))
			if(this.active === 1) {
				// 全部事项
				return list
			} else if(this.active === 2) {
				// 待办事项
				return list.filter(item => !item.isFinished)
			} else if(this.active === 3) {
				// 已完成
				return list.filter(item => item.isFinished)
			}
		}
	},
	methods: {
		// 改变头部状态
		changeList(index) {
			this.active = index
		},
		// 打开/关闭输入框
		create() {
			if(!this.isInput) {
				this.isInput = !this.isInput
				this.$nextTick(() => {
					setTimeout(() => {
						this.textShow = this.isInput
					}, 0)
				})
			}else {
				this.textShow = !this.isInput
				this.$nextTick(() => {
					setTimeout(() => {
						this.isInput = this.textShow
					}, 350)
				})
			}
			
		},
		// 添加事项
		add() {
			if(!this.value) {
				uni.showToast({
					title: '请输入内容',
					duration: 1500,
					icon: 'none'
				})
				return
			}
			this.list.unshift({
				id: Date.now(),
				content: this.value,
				isFinished: false
			})
			this.value = ''
			this.create()
		},
		// 点击完成
		hasFinished(isFinished, id) {
			let index = this.list.findIndex(item => item.id === id)
			this.list[index].isFinished = !isFinished
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
.todo-head {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	padding: 0 30rpx;
	box-shadow: -2rpx 2rpx 10rpx 0 rgba($color: #000000, $alpha: 0.1);
	background-color: #FFFFFF;
	z-index: 1;
	.todo-head_left {
		.todo-head_left-active {
			padding-right: 20rpx;
			font-size: 32rpx;
			color: $oa-active;
		}
		.todo-head_left-test {
			font-size: 32rpx;
		}
	}
	.todo-head_right {
		.todo-head_right-item {
			padding-left: 20rpx;
			font-size: 28rpx;
			&.active {
				color: $oa-active;
			}
		}
	}
}
.todo-content {
	position: relative;
	padding-top: 100rpx;
	// padding-bottom: 200rpx;
	height: calc(100vh - 260rpx);
	overflow: scroll;
	.todo-list {
		position: relative;
		display: flex;
		align-items: center;
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 20rpx;
		box-shadow: -2rpx 2rpx 10rpx 2rpx rgba(0, 0, 0, 0.1), -2rpx 4rpx 2rpx 0 #ffffff inset;
		font-size: 28rpx;
		color: #0c3854;
		background-color: #cfebfd;
		overflow: hidden;
		&::after {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			content: '';
			width: 10rpx;
			background-color: #91d1e8;
		}
		.todo-list_checkbox {
			padding-right: 20rpx;
			.checkbox {
				position: relative;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				box-shadow: 0 0 10rpx 2rpx rgba($color: #000000, $alpha: 0.1);
				background-color: #ffffff;
			}
		}
	}
	.todo-finish {
		background-color: #eeeeee;
		&::after {
			background-color: #888888;
		}
		&::before {
			position: absolute;
			content: '';
			left: 80rpx;
			right: 20rpx;
			top: 0;
			bottom: 0;
			height: 4rpx;
			margin: auto 0;
			background-color: #bdcdd8;
		}
		.checkbox {
			&::after {
				position: absolute;
				width: 20rpx;
				height: 20rpx;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				content: '';
				border-radius: 50%;
				box-shadow: 0 0 4rpx 0 rgba(0, 0, 0, 0.2) inset;
				background-color: #cfebfd;
			}
		}
		.todo-list_content {
			color: #999;
		}
	}
}
.todo-noData {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
	padding-top: 100rpx;
	color: #888;
}
.todo-create {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 40rpx;
	left: 0;
	right: 0;
	width: 100rpx;
	height: 100rpx;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #deeff5;
	box-shadow: -2rpx 2rpx 10rpx 4rpx rgba(0, 0, 0, 0.1), -2rpx 2rpx 2rpx 0 rgba(255, 255, 255, 0.75) inset;
	.todo-create-icon {
		font-size: 48rpx;
		transition: transform 0.3s;
	}
	.todo-create-active {
		transform: rotate(135deg);
	}
}
.todo-create-content {
	position: fixed;
	display: flex;
	align-items: center;
	bottom: 190rpx;
	left: 40rpx;
	right: 40rpx;
	padding-left: 30rpx;
	border-radius: 100rpx;
	background-color: #deeff5;
	box-shadow: -2rpx 2rpx 10rpx 4rpx rgba(0, 0, 0, 0.1), -2rpx 2rpx 2rpx 0 rgb(255, 255, 255) inset;
	transition: all 0.3s;
	opacity: 0;
	transform: scale(0) translateY(100%);
	&.create-show {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
	&::after {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -18rpx;
		content: '';
		width: 40rpx;
		height: 40rpx;
		margin: 0 auto;
		transform: rotate(45deg);
		background-color: #deeff5;
		box-shadow: 2rpx 2rpx 10rpx 4rpx rgba(0, 0, 0, 0.1);
	}
	&::before {
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		content: '';
		width: 80rpx;
		height: 34rpx;
		margin: 0 auto;
		background-color: #deeff5;
	}
	.create-input {
		width: 100%;
		color: #add8e6;
		padding-right: 30rpx;
	}
	.create-button {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		width: 160rpx;
		height: 100rpx;
		border-radius: 100rpx;
		font-size: 32rpx;
		color: #88d4ec;
		box-shadow: -4rpx 0 4rpx 2rpx rgba(0, 0, 0, 0.1);
	}
}
</style>
